<script setup lang="ts">
  import qs from 'qs';
  import DialogForm from './components/DialogForm.vue';
  import { Plus, Delete, Search, Refresh, Edit } from '@element-plus/icons-vue';
  import {
    GetTableData,
    PostDataSave,
    PostEditSave,
    PostRemove,
    deleteTableList,
  } from '@/api/comRegion';
  interface state {
    tableData: Array<Namespace.areaTableType>;
    total: number;
    pageSize: number;
    currentPage: number;
    regionName: string;
    queryData: Array<Namespace.areaTableType>;
    MultiSelectData: Array<Namespace.areaTableType>;
  }
  const height = ref<string>('calc(100vh - 150px)');
  const show = ref<boolean>(false);
  const title = ref<string>('');
  const data = ref<Namespace.areaTableType>();
  const state: state = reactive({
    tableData: [],
    total: 0,
    pageSize: 10,
    currentPage: 1,
    regionName: '',
    queryData: [],
    MultiSelectData: [],
  });
  onMounted(async () => {
    handleGetData();
  });
  const handleGetData = async () => {
    const { data } = await GetTableData();
    state.tableData = data;
    state.queryData = data;
    state.total = data.length;
  };
  const handleSizeChange = (value: number) => {
    state.currentPage = 1;
    state.pageSize = value;
  };
  const handleCurrentChange = (value: number) => {
    state.currentPage = value;
  };
  const handleKey = async () => {
    if (state.regionName) {
      state.regionName = state.regionName.toLowerCase();
      const dataMap = state.queryData.filter((item) => {
        return item.regionName.includes(state.regionName);
      });
      state.tableData = dataMap;
      state.total = dataMap.length;
      state.currentPage = 1;
      state.pageSize = 10;
    } else {
      const { data } = await GetTableData();
      state.tableData = data;
    }
  };
  const handleRefresh = async () => {
    const { data, code } = await GetTableData();
    if (code == 0) {
      state.total = data.length;
      state.regionName = '';
      state.currentPage = 1;
      state.pageSize = 10;
      ElMessage.success('重置成功');
      state.tableData = data;
    }
  };
  const handleEdit = (value: string, rows: Namespace.areaTableType | null) => {
    show.value = !show.value;
    title.value = value;
    if (rows != null) {
      data.value = rows;
    }
  };
  const handleClose = (value: boolean) => {
    show.value = value;
  };
  const handleSubmit = async (value: Namespace.areaTableType, title: string) => {
    if (title == '新增') {
      const { code } = await PostDataSave(qs.stringify(value));
      if (code == 0) {
        show.value = !show.value;
        handleGetData();
      }
    } else {
      const { code } = await PostEditSave(qs.stringify(value));
      if (code == 0) {
        show.value = !show.value;
        handleGetData();
      }
    }
  };
  const handleDelete = async (rows: Namespace.areaTableType) => {
    const { code } = await PostRemove(qs.stringify({ regionId: rows.regionId as number }));
    if (code == 0) {
      handleGetData();
    }
  };
  const handleSelectionChange = async (value: Array<Namespace.areaTableType>) => {
    state.MultiSelectData = value;
  };
  const handleDlete = async () => {
    if (!state.MultiSelectData.length) {
      ElMessage.info('请选择需要删除的数据！');
    } else {
      const dataIds = state.MultiSelectData.map((item) => {
        return item.regionId as number;
      });
      const { code } = await deleteTableList(dataIds);
      if (code == 0) {
        handleGetData();
      }
    }
  };
</script>

<template>
  <div class="table_content">
    <div class="table_content_search">
      <div class="search">
        <ElInput
          v-model="state.regionName"
          placeholder="域名回车后查询"
          style="height: 38px; width: 300px"
          @keyup.enter="handleKey"
        />
      </div>
      <div class="button">
        <ElButton type="primary" :icon="Search" @click="handleKey">查询</ElButton>
        <ElButton type="info" :icon="Refresh" @click="handleRefresh">重置</ElButton>
        <ElButton type="primary" :icon="Plus" @click="handleEdit('新增', null)">新增</ElButton>
        <ElButton type="danger" :icon="Delete" @click="handleDlete">删除</ElButton>
      </div>
    </div>
    <div class="table_content_tables">
      <ElTable
        ref="TablesData"
        :data="
          state.tableData.slice(
            (state.currentPage - 1) * state.pageSize,
            state.currentPage * state.pageSize,
          )
        "
        style="width: 100%"
        :max-height="height"
        border
        table-layout="fixed"
        @selection-change="handleSelectionChange"
      >
        <ElTableColumn type="selection" width="55" />
        <ElTableColumn prop="regionName" label="域名" />
        <ElTableColumn prop="regionCode" label="编号" />
        <ElTableColumn prop="regionType" label="类型">
          <template #default="scope">
            <span>{{
              scope.row.regionType == 0
                ? '数据管理'
                : scope.row.regionType == 1
                ? '单元管理'
                : scope.row.regionType == 2
                ? '枚举管理'
                : scope.row.regionType == 3
                ? '权限管理'
                : scope.row.regionType == 4
                ? '功能sql管理'
                : ''
            }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="parameterName" label="操作">
          <template #default="scope">
            <ElButton type="primary" :icon="Edit" @click="handleEdit('编辑', scope.row)"
              >编辑</ElButton
            >
            <ElButton type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <div style="margin-top: 20px">
        <ElPagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="state.currentPage"
          :page-sizes="[1, 5, 10, 20]"
          background
          :page-size="state.pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="state.total"
        />
      </div>
    </div>
  </div>
  <DialogForm
    :show="show"
    :title="title"
    @update:value="handleClose"
    @update:object="handleSubmit"
    :data="data"
  />
</template>

<style lang="scss" scoped>
  .table_content {
    width: $width;
    padding: 20px;
    &_search {
      display: flex;
      flex-direction: row;
      align-items: center;
      .button {
        margin-left: 50px;
        :deep(.el-button) {
          height: 38px;
        }
      }
    }
    &_tables {
      padding-top: 20px;
      :deep(th) {
        color: #000;
        background-color: rgba(9, 96, 189, 0.05);
        background-image: linear-gradient(rgba(9, 96, 189, 0.1), #fff);
      }
      :deep(.el-radio) {
        margin-right: 15px;
      }
      :deep(.el-radio:last-child) {
        margin-right: 0;
      }
      :deep(.el-radio--large) {
        height: 25px;
      }
    }
  }
</style>
